<!--
 * @Author: lizhenpeng
 * @Date: 2020-03-28 14:44:30
 * @LastEditTime: 2020-03-28 16:03:03
 * @LastEditors: lizhenpeng
 * @Description:信息展示
 -->
<template>
  <el-col :span="col" :xs="24">
    <label class="info-label" :style="{width:labelWidth}">{{ label }}{{ isColon?'：':'' }}</label>
    <div class="info-content" :style="{marginLeft:labelWidth}">
      <slot />
    </div>
  </el-col>
</template>

<script>
export default {
  name: 'InfoItem',
  props: {
    labelWidth: {
      type: String,
      default: '110px'
    },
    // 是否显示冒号
    isColon: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: ''
    },
    col: {
      type: Number,
      default: 24
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-label{
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }
  .info-content{
    line-height: 40px;
    box-sizing: border-box;
  }
</style>
